<template>
	<view class="container">
		<u-navbar leftIconColor="#fff" title="订单详情" placeholder bgColor="transparent" :autoBack="true"></u-navbar>

		<view class="centerXY columnY mar-top-52 mar-bottom-28">

			<image v-if="info.pay_status == 2" class="status" src="../../static/icon/market-submit.png"></image>
			<image v-else class="status" src="../../static/icon/order-cancel.png"></image>

			<view v-if="info.pay_status == 1" class="color-theme font-28">待支付</view>
			<view v-if="info.pay_status == 2" class="success font-28">已支付，结算成功</view>
			<view v-if="info.pay_status == 3" class="color-theme font-28">已取消</view>
			<view v-if="info.pay_status == 4" class="color-theme font-28">订单超时已取消</view>
			<view v-if="info.pay_status == 20" class="color-theme font-28">已退款</view>
			<view v-if="info.pay_status == 5" class="color-theme font-28"></view>

			<view v-if="info.pay_status == 1" class="mar-top-20 font-24 color-theme  centerXY">
				<view>支付倒计时</view>
				<u-count-down class="mar-left-10" @finish="hanldeFinish" :time="countDown(info.end_pay_at,newTime)"
					format="mm:ss"></u-count-down>
			</view>
		</view>

		<view class="bg-theme1 pad-32 mar-top-60 goods-box">
			<view class="centerY pad-16">
				<image class="goods-image radius16" v-if="ext.goods_info" :src="ext.goods_info.cover" mode="aspectFill">
				</image>
				<view class="mar-left-20 betweenY goods-info">
					<view v-if="ext.goods_info" class="font-28 color-white font-w-600">{{ext.goods_info.name}}</view>
					<view class="font-24 color-grey">数量：x1</view>
				</view>
			</view>
			<view class="order-info">

				<view class="pad-bottom-16 color-white font-w-500 font-30">订单管理</view>
				<view class="cell betweenX pad-top-bottom-16 font-28">
					<view class="color-grey">订单金额：</view>
					<view class="color-white">￥{{info.amount}}</view>
				</view>
				<view class="cell betweenX pad-top-bottom-16 font-28">
					<view class="color-grey">订单ID号：</view>
					<view class="centerY">
						<text class="color-white">{{info.order_no}}</text>
						<setCopy :content="info.order_no" class="centerY">
							<template v-slot:content>
								<image class="copy" src="../../static/icon/copy-icon.png"></image>
							</template>
						</setCopy>
					</view>
				</view>

			</view>
		</view>


		<pay-list v-if="info.pay_status == 1" @payNumber="payNumber" @hanldeTypePay="hanldeTypePay" :scene="info.scene"
			:allowPlat="info.allow_pay_plat"></pay-list>

		<my-popup :title="info.amount" content="您确认购买吗？" :show="isPopup" @cancel="isPopup = false"
			@confirm="$u.debounce(hanldeLogin,500)"></my-popup>
		<view class="button-box pad-left-right-32 pad-top-bottom-6 bg-theme1 centerY">
			<view v-if="info.pay_status == 1" class="centerY flex-w">
				<!-- <view class="cancel">取消订单</view> -->
				<view @click="hanldePay" class="confirm button flex-w text-center">确认支付</view>
			</view>
			<view v-else class="button flex-w" @click="hanldeMyMarket">我的藏品</view>
		</view>
	</view>
</template>

<script>
	import {
		userOrderDetail,
		cashierPay,
		payPlat,
		openWallet,
		userWalletOPen,
		userWalletInfo
	} from '@/config/api.js'
	export default {
		data() {
			return {
				ext: {},
				info: {},
				// 弹框
				isPopup: false,
				// 当前时间
				newTime: parseInt(new Date().getTime() / 1000),
				// 开通了几个支付
				isPay: 0,
				// 支付列表
				payList: [],
				// 默认支付方式
				pay: 0,
				// 支付方式
				pay_plat: 0
			}
		},
		onLoad(options) {
			this.orderId = options.id
			this.orderInfo();
		},
		methods: {
			// 当前是那个支付
			hanldeTypePay(id) {
				this.payId = id;
			},
			// 开通了几个支付
			payNumber(number) {
				this.isPay = number;
			},
			// 倒计时计算 time - time1 *1000
			countDown(time, time1) {
				return (time - time1) * 1000;
			},
			// 倒计时结束
			hanldeFinish() {
				this.info.pay_status = 4;
			},
			// 判断环境
			getEnvironment() {
				// #ifdef APP-PLUS
				return 'app'
				// #endif

				// #ifdef H5
				return 'wap'
				// #endif
			},
			// 重新支付
			hanldeLogin() {

				// 快付通支付
				if (this.payId == 13) {
					uni.navigateTo({
						url: `/pages/kft/orderCashie?id=${this.info.id}`
					})
					return
				}

				this.isPopup = false;
				uni.showLoading({
					title: '支付中...',
					mask: true
				})
				// 支付订单
				cashierPay({
					order_id: this.info.id,
					pay_plat: this.info.amount == '0.00' ? 14 : this.payId,
					os: this.getEnvironment()
				}).then(res => {
					uni.hideLoading();
					if (this.info.amount == '0.00') {
						setTimeout(() => {
							let pages = getCurrentPages(); //获取页面实例
							let nowPage = pages[pages.length - 1]; //当前页面实例
							let prevPage = pages[pages.length - 2]; //上一级页面实例

							prevPage.$vm.isRefresh()
							uni.navigateBack({ //返回
								delta: 1
							})
						}, 500)
						return
					}
					let {
						pay_data
					} = res.data;
					// #ifdef APP-PLUS
					if (this.payId == 10) {
						// uni.navigateTo({
						// 	url: '/pages/web-view/web-view?url=' + pay_data.pay_url
						// })
						 plus.runtime.openURL(pay_data.pay_url)
					}
					// #endif
					// #ifdef H5
					window.location.href = pay_data.pay_url
					// #endif
				}).catch(() => {
					uni.hideLoading();
				})
			},
			hanldeMyMarket() {
				uni.navigateTo({
					url: '/pages/my/myCollection'
				})
			},
			// 立即支付
			hanldePay() {
				this.isPopup = true;
			},
			// 我的订单详情
			orderInfo() {
				userOrderDetail({
					id: this.orderId
				}).then(res => {
					let {
						info: {
							ext_info: ext
						},
						info
					} = res.data;

					this.ext = ext;
					this.info = info;
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.container {
		min-height: 100vh;
		padding-bottom: 100rpx;

		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}

		.icon-box {
			width: 30rpx;
			flex-shrink: 0;
			height: 30rpx;
			border: 1rpx solid #c8c9cc;
			border-radius: 50%;
		}

		.button-pay {
			background: linear-gradient(270deg, #df0007, #df0007);
			color: #fff;
			font-size: 24rpx;
			line-height: 44rpx;
			padding: 0 20rpx;
			border-radius: 20rpx;
		}

		::v-deep .u-count-down__text {
			display: block;
			// width: 110rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			color: $uni-theme;
		}


		.status {
			display: block;
			width: 112rpx;
			height: 112rpx;
		}

		.success {
			color: #59bb73;
		}

		.goods-box {
			border-radius: 24rpx 24rpx 0 0;

			.goods-image {
				display: block;
				width: 160rpx;
				height: 160rpx;
			}

			.goods-info {
				height: 160rpx;
			}
		}

		.order-info {
			margin-top: 48rpx;

			.copy {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.steps {
			padding-bottom: 60rpx;

			::v-deep .u-steps-item__wrapper__dot {
				width: 10rpx;
				height: 10rpx;
			}
		}

		.color-theme {
			::v-deep .u-text__value {
				color: $uni-theme;
			}
		}

		.button-box {
			position: fixed;
			width: 100%;
			bottom: 0;

			.button-price {
				margin-right: 100rpx;
			}

			.button {
				background: $uni-bg-theme;
				color: #fff;
				text-align: center;
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 46rpx;
				font-size: 30rpx;
				box-sizing: border-box;
			}

			.cancel {
				width: 240rpx;
				box-sizing: border-box;
				border: 1rpx solid $uni-theme;
				text-align: center;
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 46rpx;
				color: $uni-theme;
				margin-right: 20rpx;
				font-size: 30rpx;
			}
		}
	}
</style>